/******************** 变量 ********************/
$lv-alert-information-color: $feedback-color-info !default;
$lv-alert-success-color: $feedback-color-success !default;
$lv-alert-warning-color: $feedback-color-warning !default;
$lv-alert-error-color: $feedback-color-error !default;

$lv-alert-default-border-color: $border-color-base !default;
$lv-alert-information-border-color: rgba($feedback-color-info, 0.5) !default;
$lv-alert-success-border-color: rgba($feedback-color-success, 0.5) !default;
$lv-alert-warning-border-color: rgba($feedback-color-warning, 0.5) !default;
$lv-alert-error-border-color: rgba($feedback-color-error, 0.5) !default;

$lv-alert-default-bg-color: rgba($component-background, 0.05) !default;
$lv-alert-information-bg-color: rgba($feedback-color-info, 0.05) !default;
$lv-alert-success-bg-color: rgba($feedback-color-success, 0.05) !default;
$lv-alert-warning-bg-color: rgba($feedback-color-warning, 0.05) !default;
$lv-alert-error-bg-color: rgba($feedback-color-error, 0.05) !default;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-bottom: $margin-md;
  padding: $padding-md;
  overflow: hidden;
  color: $text-color;
  font-size: $font-size-base;
  line-height: $line-height-base;
  background: $lv-alert-default-bg-color;
  border: $border-width-base $border-style-base $lv-alert-default-border-color;
  border-radius: $border-radius-lg;
  transform-origin: 0 0;

  > .lv-alert-icon,
  > .lv-alert-btn-close {
    display: flex;
    align-items: center;
    height: $height-sm;
  }

  > .lv-alert-icon {
    margin-right: $margin-sm;

    > i {
      @include icon-size-md;
    }
  }

  > .lv-alert-btn-close {
    margin-left: $margin-md;

    > i {
      @include icon-size;
    }
  }

  > .lv-alert-content {
    flex: 1 1 auto;
    margin-top: 0.01rem;
    color: $text-color-secondary;

    > .lv-alert-title {
      color: $text-color;
      font-weight: $font-weight-bold;
      font-size: $font-size-base;
      line-height: $line-height-base;
    }

    > .lv-alert-desc,
    > .lv-alert-desc p {
      color: $text-color-secondary;
      font-weight: $font-weight-regular;
      font-size: $font-size-base;
      line-height: $line-height-base;
    }
  }
}

.lv-alert-information {
  background: $lv-alert-information-bg-color;
  border-color: $lv-alert-information-border-color;

  > .lv-alert-icon {
    > i {
      color: $lv-alert-information-color;
    }
  }
}

.lv-alert-success {
  background: $lv-alert-success-bg-color;
  border-color: $lv-alert-success-border-color;

  > .lv-alert-icon {
    > i {
      color: $lv-alert-success-color;
    }
  }
}

.lv-alert-warning {
  background: $lv-alert-warning-bg-color;
  border-color: $lv-alert-warning-border-color;

  > .lv-alert-icon {
    > i {
      color: $lv-alert-warning-color;
    }
  }
}

.lv-alert-error {
  background: $lv-alert-error-bg-color;
  border-color: $lv-alert-error-border-color;

  > .lv-alert-icon {
    > i {
      color: $lv-alert-error-color;
    }
  }
}

.lv-alert-action {
  margin-left: $margin-md;
}
